<template>
  <div class="edit_container">
      <el-button type="primary" v-on:click="saveHtml" class="btu_my">保存</el-button>
    <quill-editor  v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { addQuillTitle } from "@/utils/quill-title.js";
export default {
  components: { quillEditor },
  data() {
    return {
        
      readContentSub: null,
      addContent: {
        stepId: 0,
        readContent: "",
        status: 1
      },
      stepId: -1,
      content: "",
      isTrueData: "",
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ["clean"], //清除字体样式
            ["image", "video"] //上传图片、上传视频
          ]
        }
      }
    };
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    editContentStep(data) {
      this.$confirm(`你想要更改的数据为${this.stepId}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/ly/studystepreadcontent/edit/info"),
            method: "post",
            data: this.$http.adornData(data, false)
          }).then(({ data }) => {
            this.$message({
              type: "success",
              message: "更改成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    addContentStep(data) {
      this.$confirm(`你想要添加的数据为${this.stepId}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/ly/studystepreadcontent/save"),
            method: "post",
            data: this.$http.adornData(data, false)
          }).then(({ data }) => {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    saveHtml: function(event) {
      if (this.stepId == -1) {
        this.$message.error("请选择你要更改的步骤");
        return;
      }
      this.addContent.stepId = this.stepId;
      this.addContent.readContent = this.content;
        console.log("需要提交的值",this.addContent)
      if (this.isTrueData == "edit") {
        this.editContentStep(this.addContent);
      }
      if (this.isTrueData == "add") {
        this.addContentStep(this.addContent);
      }
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    addQuillTitle();
    //监听三级分类消息的变化
    this.readContentSub = PubSub.subscribe("readContent", (msg, val) => {
      console.log("订阅数据变化", val);
      this.stepId = val.stepId;
      //如果val不是null，说明已经有录入的信息,修改请求
      if (val.data && val.data != null) {
        this.editorOption.placeholder = "请在这里输入";
        this.content = val.data.readContent;
        this.isTrueData = "edit";
      } else {
          this.content="";
        //如果val是null，说明没有信息，需要知道stepId，和最新录入的内容，添加请求
        this.editorOption.placeholder = "此课程还没有数据,请尽快录入";
        this.isTrueData = "add";
      }
    });
  },

  beforeDestroy() {
    PubSub.unsubscribe(this.readContentSub); //销毁订阅
  } //生命周期 - 销毁之前
};
</script>

<style>
.edit_container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 16px !important;
}
.btu_my{
    position: absolute;
    top: -4px;
    right: 0px;
}
</style>
